<template>
  <div class="docker">
    <div
      v-for="(item, index) in dockerList"
      :class="{'docker__item': true, 'docker__item--active': index === currentIndex}"
      :key="index"
    >
      <router-link :to="item.to">
        <div class="iconfont" v-html="item.icon" />
        <div class="docker__title">{{item.text}}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Docker',
  props: ['currentIndex'],
  setup () {
    const dockerList = [
      { icon: '&#xe665;', text: '首页', to: { name: 'Home' } },
      { icon: '&#xe607;', text: '购物车', to: { name: 'CartList' } },
      { icon: '&#xe610;', text: '订单', to: { name: 'OrderList' } },
      { icon: '&#xe609;', text: '我的', to: { name: 'Home' } }
    ]
    return { dockerList }
  }
}
</script>

<style lang="scss" scoped>
// scoped 声明只对这组件有效避免对外影响
@import '../style/viriables.scss';
.docker {
  display: flex;
  //box-sizing 定义如何计算一个元素的总宽度和总高度，是否包含内边距和边框
  box-sizing: border-box;  //border-box 总宽度和总高度包含内边距(padding)和边框
  position: absolute;
  padding: 0 .18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: .01rem solid $content-bgColor;
  &__item {  // & 表示上一级的父级.docker
    flex: 1;  //让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
    text-align: center;
    a {
      color: $content-fontcolor;
      text-decoration: none;
    }
    .iconfont {
        margin: .07rem 0 .02rem 0;
        font-size: .18rem;  // 18px
    }
    &--active { // & 表示上一级的父级 (docker_item--active)
      a {
        color: #1FA4FC;
      }
    }
  }
  &__title {
    font-size: .2rem;
    transform: scale(.5, .5); // 网页最小显示12px，想要10px就横向和纵向各缩小50%
    transform-origin: center top; // 以中间，顶部位置为缩放中心点
  }
}
</style>
